<template>
<div style="position: relative;">
    <ol type="1" style="width: 70%;float: left;">
      <li>
        <div>
          <p>申请人患有癫痫病的，可以申领机动车驾驶证，但是驾驶时必须有人陪同。<button style="padding: 5px 10px;cursor: pointer;">播放语音</button></p>
        </div>
        <ol type="A" class="ol1">
          <li>正确</li>
          <li>正确1</li>
          <li>错误</li>
          <li>错误1</li>
        </ol>
        <div>
          请选择：
          <button>A</button>
          <button>B</button>
          <button>C</button>
          <button>D</button>
        </div>
      </li>
    </ol>
    <div style="overflow: hidden;clear: left;">
      <span style="float: left;padding-left: 18px;padding-top: 10px;">单选题，请选择你认为正确的答案！</span>
      <p style="float: left;margin-top: 10px;margin-left: 15px;">
        <button>上一题</button>
        <button>下一题</button>
        <span>为什么？</span>
      </p>
    </div>
    <div class="datika" style="position: absolute;width: 30%;right: 0;top: 0;">
      <p>
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">4</a>
      </p>
    </div>
 </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      quanwidth: true
    }
  },
  mounted() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped="">
  ol{
    padding-left: 20px;
  }
  ol li{display: list-item;list-style: unset;}
  .ol1 li{
    margin-top: 15px;
  }
  .ol1~div{float: left;margin-top: 20px;}
  .ol1~div button{
    padding: 5px 15px;
    background: #ccc;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 5px;
  }
  ol p{
    font-size: 16px;
  }
  .datika{max-width: 280px;padding: 5px;border: 1px solid #000;}
  .datika a{
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    text-align: center;
    line-height: 30px;
    border: 1px solid green;
    margin: 5px;

  }
</style>
